<template>
  <view class="section-header">
    <text class="section-title">{{ title }}</text>
    <view class="more-link" v-if="showMore" @click="handleMoreClick">
      <text class="more-text">查看更多</text>
      <text class="more-icon">》</text>
    </view>
  </view>
</template>

<script setup>
import { RouterMethods } from '@/utils/router'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  showMore: {
    type: Boolean,
    default: false
  },
  moreLink: {
    type: String,
    default: ''
  }
})

const handleMoreClick = () => {
  if (props.moreLink) {
    RouterMethods.navigateTo({
      url: props.moreLink
    })
  }
}
</script>

<style scoped>
.section-header {
/* background-color: royalblue; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top:40rpx;
  padding-bottom: 28rpx;
  padding-left: 4rpx;
  padding-right: 4rpx;
}

.section-title {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.more-link {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.more-text {
 font-family: PingFangSC-Light;
 font-size: 20rpx;
 color: #515151;
 letter-spacing: 0;
 font-weight: 200;
}

.more-icon {
  font-family: PingFangSC-Light;
  font-size: 20rpx;
  color: #515151;
  letter-spacing: 0;
  font-weight: 200;
}
</style> 